<template>
	<view class="container">
		<!-- 反馈标签 -->
		<scroll-view class="title" scroll-x>
			<text>反馈问题类型 </text>
		</scroll-view>
		<!-- 问题分类 -->
		<scroll-view class="tag-list" scroll-x>
			<text class="tag-item" v-for="(item, index) in categories1" :key="index" :class="{active: item.selected}"
				@click="selectCategory(item)">{{item.name}}</text>
		</scroll-view>
		<scroll-view class="tag-list" scroll-x>
			<text class="tag-item" v-for="(item, index) in categories2" :key="index" :class="{active: item.selected}"
				@click="selectCategory(item)">{{item.name}}</text>
		</scroll-view>

		<!-- 问题标题 -->
		<input class="title2" v-model="title" placeholder="请详细描述问题"></input>
		<!-- 问题内容 -->
		<textarea class="content" v-model="content" placeholder="请输入问题的描述"></textarea>

		<!-- 提交按钮 -->
		<button class="button" @click="publish">提交</button>
		<image class="image" :src="img"></image>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				img: '../../../static/img/back.png',
				

				// 分类
				categories1: [{
						name: "无法打开app ",
						selected: false
					},
					{
						name: " app闪退 ",
						selected: false
					},
					{
						name: " 界面加载慢 ",
						selected: false
					},


				],
				categories2: [{
						name: " app崩溃 ",
						selected: false
					},
					{
						name: " 界面错位 ",
						selected: false
					},
					{
						name: " 卡顿 ",
						selected: false
					},
					{
						name: " 其他异常 ",
						selected: false
					}
				]
			};
		},
		methods: {
			// 发布文章
			publish() {
				if (this.content) {
					uni.showToast({
						title: "提交成功",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "请填写完整信息",
						icon: "none"
					});
				}
			},
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.images.length,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: res => {
						this.images = this.images.concat(res.tempFilePaths);
					}
				});
			},
			// 选择标签
			selectTag(item) {
				item.selected = !item.selected;
			},
			// 选择分类
			selectCategory(item) {
				item.selected = !item.selected;
				// 只能选择一个分类，取消其他分类的选择
				for (let category of this.categories) {
					if (category !== item) {
						category.selected = false;
					}
				}
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}

	.title {
		width: 80%;
		height: 80rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 55rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.title2 {
		width: 80%;
		height: 60rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 45rpx;
		font-weight: bold
	}

	.content {
		width: 80%;
		height: 240rpx;
		margin-top: 20rpx;
		border: 1rpx solid #cccccc;
		border-radius: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 30rpx
	}

	.active {
		color: #ffffff;
		background-color: #ff0000
	}

	.tag-list {
		display: flex;
		width: 80%;
		height: 50rpx;
		margin-top: 10rpx;
	}

	.tag-item {
		font-size: 30rpx;
		margin: 5rpx;
		color: #000000;
		border: 1rpx solid #999999;
		border-radius: 25rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-top: 10rpx;
	}

	.button {
		width: 80%;
		height: 80rpx;
		margin-top: 40rpx;
		background-color: #1aad19;
		color: #ffffff;
		border-radius: 10rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		box-shadow: -2rpx -2rpx 4rpx #ffffff, 2rpx 2rpx 4rpx #cccccc;
	}

	.image {
		width: 80%;
		height: 280rpx;
		margin-top: 100rpx;
	}
</style>
